// import React, { PureComponent } from 'react';
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Form, Select, Row, Col } from 'antd';
import searchStyles from '@/components/common/PateoSearchForm/style.less';
import Ability from '../components/ability';
import ability from '../base.less';

const { Option } = Select;

  const mapStateToProps = (state:any) => ({
    basedata: state.basedata,
  });
class index extends Component<any> {
  state = {
    brandOptions: [],
    defaultBrand: '',
    selectBrand: '',
    selectType: 1,
  };
  refAbility = null;
  initialValues = {
    username: 1,
  };
  classification = [
    {
      value: 1,
      label: 'APP功能',
    },
    {
      value: 2,
      label: '车机功能',
    },
    {
      value: 3,
      label: '算法',
    },
    {
      value: 4,
      label: '车辆健康',
    },
  ];
  // 获取数据
  componentDidMount() {
    this.getBrand();
    // this.getList(this.initialValues.username);
  }
  getBrand = () =>{
    const { dispatch } = this.props;
    let brandCode = '';
    dispatch({
      type: 'basedata/brandFetch',
      callback: (res:any) => {
        this.setState({ 
           brandOptions: res?.data,
           defaultBrand: res?.data[0].brandCode,
           selectBrand: res?.data[0].brandCode
          });
          brandCode = res?.data[0].brandCode;
          this.getList(this.initialValues.username,  brandCode);
        }
    });
  };
  getList = (val: any, brandId:string) => {
    this.refAbility?.initList({
      featureType: val,
      brandId: brandId
    });
  };
  onGenderChange = (value: string) => {
    this.setState({
      selectType: value
    })
    const {selectBrand}=this.state;
    this.getList(value, selectBrand);
    this.refAbility?.isNextReset();
  };
  onBrandSelect = (value:any) =>{
    this.setState({
      selectBrand: value
    })
    const {selectType}=this.state;
    this.getList(selectType, value);
    this.refAbility?.isNextReset();
  }
  render() {
    const options = this.state.brandOptions.map((item:any)=>{
      return {
        label: item.brandName,
        value: item.brandCode
      }
    })
    return (
      <div>
        <Card bordered={false}>
          <Form initialValues={this.initialValues} className={searchStyles.tableListForm}>
          <Row gutter={24} className={searchStyles.my_searchRow}>
              <Col span={8}>
                <Form.Item label="品牌" name="brandId">
                 <Select
                    allowClear={false}
                    placeholder="请选择品牌"
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                    
                    onChange={this.onBrandSelect}
                    style={{width: '250px'}}
                    key={this.state.defaultBrand}
                    defaultValue={this.state.defaultBrand}
                    options={options}
                  >
                   </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24} className={searchStyles.my_searchRow}>
              <Col span={8}>
                <Form.Item label="功能分类" name="username">
                  <Select onChange={this.onGenderChange}>
                    {this.classification.map(e => (
                      <Option value={e.value} key={e.value}>
                        {e.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
        <div className={ability.abilityBox}>
          <div className="ability">
            <Ability onRef={(val:any) => (this.refAbility = val)}></Ability>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(mapStateToProps)(index);
